<template>
	<view>
		<u-navbar back-icon-color="#000" title="我的账户" :border-bottom="false" title-color="#000" :background="{}"></u-navbar>
		<view class="top-bg"></view>
		<view class="vip-card" @click="jump('/pages/college/upgrade')">
			<view class="u-flex">
				<image class="avatar" :src="vuex_user.headimg" v-if="vuex_user.headimg"></image>
				<view class="name u-line-1">{{vuex_user.nickname}}</view>
				<image class="vip-level" :src="vuex_user.levelLogo" v-if="vuex_user.levelLogo"></image>
			</view>
			<view class="vip-text">{{vuex_user.levelName ? `您当前等级为${vuex_user.levelName}` : '您还不是会员'}}</view>
		</view>
		
		<view class="wallet-title">钱包</view>
		<view class="wallet">
			<view class="u-flex money">
				<view class="item num1">
					<image src="/static/icon2/ib.png"></image>
					<view class="num u-flex">{{vuex_user.icoin}}</view>
					<!-- <view class="btn" @click="jump('/pages/mine/recharge')">充值</view> -->
					<view class="btn" @click="show = !0">充值</view>
				</view>
				<view class="item num2">
					<image src="/static/icon2/eb.png"></image>
					<view class="num u-flex">{{vuex_user.ecoin}}</view>
					<view class="btn" @click="jump('/pages/mine/withdraw')">提现</view>
				</view>
			</view>
			
			<view class="change">
				<view class="line-box u-flex">
					<image src="/static/icon2/eb.png"></image>
					<text>转换e币数量</text>
					<input type="number" v-model="eb" class="eb-input" placeholder="请输入"/>
				</view>
				<view class="line-box u-flex">
					<image src="/static/icon2/ib.png"></image>
					<text>可得i币数量</text>
					<input type="number" disabled :value="(Number(eb)/Number(vuex_commission.withdrawEcoinIcoin)).toFixed(2)"/>
				</view>
				<view class="tip">兑换比例：{{vuex_commission.withdrawEcoinIcoin}}e币=1i币</view>
			</view>
			<view class="btn-wrap">
				<view @click="eb2ib">立即转换</view>
			</view>
			
			<u-mask :show="show" @click="show = !1">
				<rechargeib v-if="show" @pay="payed" hide-info></rechargeib>
			</u-mask>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				eb:'',
				show:!1
			}
		},
		methods: {
			eb2ib(){
				if(!Number(this.eb)){
					this.$u.toast('E币余额不足')
					return
				}
				uni.showModal({
					content:'是否转换',
					success: (res) => {
						res.confirm && this.$u.api.eb2ib({
							money:Number(this.eb)
						}).then(res=>{
							this.$u.toast('转换成功')
							// 刷新信息
							this.refresh()
						})
					}
				})
				
			},
			refresh(){
				this.$store.dispatch('commission',this)
				this.$store.dispatch('userInfo',this).then(res=>{
					this.eb = Number(res.ecoin) || 0
				})
			},
			payed(){
				this.show = !1
				// 支付完成
				this.$store.dispatch('userInfo',this).then(res=>{
					this.eb = Number(res.ecoin) || 0
				})
			}
		},
		onLoad({show = 0}) {
			this.refresh()
			if(show){
				this.show = !0
			}
		}
	}
</script>

<style lang="scss">
	.top-bg{
		background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);
		padding-top: var(--status-bar-height);
		position: absolute;height: 320rpx;overflow: hidden;width: 100%;top: 0;box-sizing: content-box;
		&::after{content: '';display: block;position: absolute;bottom: -195rpx;left: 50%;transform: translateX(-50%);border: 200rpx solid #fff;width: 2500rpx;height: 2500rpx;border-radius: 50%;}
	}
	// 会员卡片
	.vip-card{
		background-color: #262838;height: 220rpx;border-radius: 20rpx;position: relative;margin: 30rpx 50rpx 0;padding-top: 40rpx;padding-left: 20rpx;
		box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.1);
		.vip-level{width: 90rpx;height: 52rpx;display: block;flex-shrink: 0;}
		.name{color: #fff;font-weight: bold;font-size: 28rpx;margin: 0 20rpx;}
		.avatar{width: 84rpx;height: 84rpx;border-radius: 50%;border: 4rpx solid #fff;flex-shrink: 0;}
		.vip-text{color: #fff;font-size: 30rpx;position: absolute;left: 30rpx;bottom: 20rpx;white-space: nowrap;}
	}
	// 钱包
	.wallet-title{text-align: center;font-weight: bold;font-size: 28rpx;padding: 40rpx 0 20rpx;}
	.wallet{
		box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.1);margin: 0 60rpx;border-radius: 20rpx;padding: 30rpx 20rpx;
		.money{
			justify-content: space-between;padding-bottom: 40rpx;border-bottom: 1rpx solid #ddd;
			.item{width: 50%;text-align: center;
				image{width: 36rpx;height: 36rpx;display: block;margin: 0 auto;}
				.btn{border-radius: 10rpx;width: 120rpx;text-align: center;color: #fff;font-size: 28rpx;margin: 0 auto;line-height: 52rpx;}
				.num{height: 100rpx;justify-content: center;align-items: center;flex-wrap: wrap;word-break: break-all;font-size: 40rpx;font-weight: bold;}
			}
			.num1{
				border-right: 1rpx solid #ddd;
				.btn{background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);}
			}
			.num2{
				// border-left: 1rpx solid #ddd;
				.btn{background-color: #333;}
			}
		}
		.change{
			padding-top: 10rpx;
			.line-box{background-color: #F2F2F2;border-radius: 20rpx;height: 80rpx;padding: 0 20rpx;margin-top: 24rpx;
				image{width: 36rpx;height: 36rpx;display: block;flex-shrink: 0;}
				text{font-size: 26rpx;margin: 0 20rpx;}
				input{flex: 1;}
				.eb-input{padding: 8rpx 14rpx;background-color: #fff;border-radius: 10rpx;}
			}
			.tip{color: #F55332;padding-top: 30rpx;}
		}
		.btn-wrap{
			padding: 40rpx 100rpx 4rpx;
			view{line-height: 72rpx;background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);color: #fff;text-align: center;font-size: 30rpx;border-radius: 100rpx;font-weight: bold;}
		}
	}
</style>
